const path  =  require('path');
const entry = require("./entry_webpack");
const uglify = require('uglifyjs-webpack-plugin');
const htmlPlugin= require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const glob = require('glob-all');    // 这里一定要安装glob-all这个插件而不是glob
const PurifyCSSPlugin = require('purgecss-webpack-plugin');
const webpack = require('webpack');

module.exports={
  mode:'development',
  //入口文件的配置项
  entry:entry.path,
  //出口文件的配置项
  output:{
    //打包的路径文职
    path:path.resolve(__dirname,'dist'),
    //打包的文件名称
    filename:'[name].js'
  },
  //模块：例如解读CSS,图片如何转换，压缩
  module:{
    rules:[
      {
        test: /\.css$/,
        use:[MiniCssExtractPlugin.loader, {
          loader:'css-loader',
            options:{
              importLoaders:1
            }
        },'postcss-loader']
      },
      {
        test: /\.less$/,
        use:[MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
      },
      {
        test: /\.scss$/,
        use:[MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      },
      {
        test:/\.(png|jpg|gif)/ ,
        use:[{
            loader:'url-loader',
            options:{
              limit:500000,
              esModule: false,
              outputPath:'images/'
            }
        }]
      },
      {
        test: /\.(htm|html)$/i,
        use:[ 'html-withimg-loader'] 
      },
      {
        test:/\.(jsx|js)$/,
        use:{
            loader:'babel-loader',
        },
        exclude:/node_modules/
      }
    ]
  },
  //插件，用于生产模版和各项功能
  plugins:[
    new uglify(),
    new htmlPlugin({
      minify:{
        removeAttributeQuotes:true
      },
      hash:true,
      template:'./src/index.html'
    }),
    new PurifyCSSPlugin({       // css 文件去重
      paths: glob.sync([
        path.join(__dirname, './src/*.html'),
        path.join(__dirname, './src/*.js'),
        path.join(__dirname, './src/*.ts'),
      ],{
        nodir: true
      })
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: "[id].css"
    }),
    new webpack.ProvidePlugin({
      $:"jquery"
    })
  ],
  //配置webpack开发服务功能
  devServer:{
    //设置基本目录结构
    contentBase:path.resolve(__dirname,'dist'),
    //服务器的IP地址，可以使用IP也可以使用localhost
    host:'localhost',
    //服务端压缩是否开启
    compress:true,
    //配置服务端口号
    port:1717
  }
}